<template>
  <div class="registermsg">
    <div class="registermsg-box">
      <div class="tips">
        <i class="el-icon-success"></i
        >恭喜！您的参赛账户已经注册成功！
      </div>
      <p class="login">您可以通过手机号{{phone}}进行登录</p>
      <el-button class="msg-btn" @click="getLogin" type="primary"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    phone: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    getLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.registermsg {
  width: 100%;
  height: 100vh;
  
  background-image: url(../../../../assets/images/login/login.png);
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
}
.registermsg-box {
  width: 900px;
  height: 400px;
  background: #ffffff;
  box-shadow: 0px 5px 12px 0px rgba(3, 3, 3, 0.1);
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.tips {
  width: 100%;
  margin: 104px 0 auto;
  font-size: 18px;
  color: #0B4696;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tips i {
  font-size: 30px;
  margin-right: 15px;
}
.login {
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  margin-top: 30px;
}
.msg-btn {
  margin: 60px auto 0;
  display: block;
  letter-spacing: 12px;
  width: 380px;
  height: 60px;
  background: #0B4696;
  box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51);
  border-radius: 2px;
  font-size: 18px;
}
</style>